<template>
    <div id="fontHeader">
        <div class="fontHeader">
            <a class="logo left" href="/">
                <img src="@/assets/img/logo.png" alt="logo">
                <b class="title">美食食谱</b>
            </a>
            <!-- 导航 -->
            <ul class="nav">
                <router-link to="/home" custom v-slot="{navigate,isActive}">
                    <li @click="navigate" :class="isActive?'act':''">首页</li>
                </router-link>
                <router-link to="/Recipe" custom v-slot="{navigate,isActive}">
                    <li @click="navigate" :class="isActive?'act':''">
                        食谱
                    </li>
                </router-link>
                <router-link to="/ShoppingCenter" custom v-slot="{navigate,isActive}">
                    <li @click="navigate" :class="isActive?'act':''">商城</li>
                </router-link>
            </ul>
            <!-- 搜索 -->
 <div class="search">
              <input type="text" v-model="input" @keydown.enter="search" placeholder="搜索菜谱、菜单、食材、用户">
                <button class="el-icon-search" @click="search"></button>
                <div v-if="suggestControl" class="searchSuggest">
                    <ul v-for="(data,index) in datalist" :key="index" >
                        <li>
                            <span>{{index+1}}.</span>
                            <span>{{data}}</span>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 发布 -->
            <div class="issue">
                <span>发布</span>
                <div>
                    <ul>
                        <a @click="upFood">发布菜谱</a>
                        <a @click="creates">创建菜单</a>
                    </ul>
                </div>
            </div>
            <!-- {{$store.state.token === null}} -->
            <!-- 我的(已经登录) -->
            <div class="myInfo" v-if="getTokens()">
                <router-link :to="{
                  name: 'CenterRecipes',
                  params: {
                    userId: getUserId()
                  }
                }">
                    <img :src="userMsg.headImg" alt="">
                </router-link>
                <div class="myIdet">
                    <ul>
                      <router-link :to="{name:'NewsFeedback'}">消息提醒</router-link>
                      <router-link :to="{
                        name: 'CollectRecipes',
                        params: {
                          userId: getUserId()
                        }
                      }">我的收藏</router-link>
                      <router-link to="/MyOrder">我的订单</router-link>
                      <router-link to="/Profile">账号设置</router-link>
                      <router-link v-if="userMsg.grade===1" :to="{name:'BackgroundHomePage'}">后台管理</router-link>
                      <a @click="exitLogin">退出</a>
                    </ul>
                </div>
            </div>
            <!-- 我的(未登录) -->
            <div v-else class="perInfo">
            <div class="perInfo">
                <router-link :to="{
                  name: 'Login'
                }">登录</router-link>
                <span>|</span>
                <router-link :to="{
                  name: 'Sign'
                }">注册</router-link>
            </div>
        </div>
        </div> </div>
</template>
<script>
// import cookie from '../../../cookien'
// import jwt from 'jwt-decode'0

export default {
  data () {
    return {
      activeIndex: '1',
      activeIndex2: '1',
      datalist: ['测试', '测试', '测试', '测试', '测试', '测试', '测试', '测试', '测试'],
      suggestControl: false,
      getToken: {
        token: this.$store.state.token
      },
      userMsg: {},
      input: '',
      selectGood: '',
      loginJudge: false
    }
  },
  computed: {
    getTokens () {
      return () => {
        if (this.getToken.token === null || this.getToken.token === 'null') {
          // console.log('false')
          return false
        } else {
          // console.log('true')
          return true
        }
      }
    }
  },
  mounted () {
    // console.log(this.$store.state.token === null)
    if (this.$store.state.token !== 'null' && this.$store.state.token !== undefined) {
      if (this.$store.state.token !== null) {
        this.getMsg()
        this.loginJudge = true
      }
    }
  },
  methods: {
    // 退出登录
    exitLogin () {
      this.$store.dispatch('removeToken', null)
      this.$message({
        message: '退出成功',
        type: 'success'
      })
      this.$router.push({
        name: 'Login'
      })
    },
    getUserId () {
      return (this.$store.state.userMsg === null ? 1 : this.$store.state.userMsg.userId)
    },
    // 跳转
    upFood () {
      if (this.$store.state.token !== 'null' && this.$store.state.token !== '') {
        this.$router.push({
          name: 'UpFood',
          params: {
            userId: 1
          }
        })
      } else {
        this.$message('请先登录')
      }
    },
    creates () {
      if (this.$store.state.token !== 'null' && this.$store.state.token !== '') {
        this.$router.push({
          name: 'Create',
          params: {
            userId: 1
          }
        })
      } else {
        this.$message('请先登录')
      }
    },
    // 获取用户信息
    getMsg () {
      this.$axios({
        url: '/Menu/User/getUserInfo'
      }).then(data => {
        const msg = data.data
        if (msg.code === 200) {
          // console.log(msg)
          this.userMsg = msg.object
        } else {
          this.$message(msg.message)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    handleSelect (key, keyPath) {
      console.log(key, keyPath)
    },
    searchJudje () {
      return new Promise((resolve, reject) => {
        resolve(this.$route)
      })
    },
    async search () {
      // console.log(this.$router)
      const route = await this.searchJudje()
      console.log(route)
      if (route.name === 'SearchMenu' || route.name === 'SearchPage' || route.name === 'LookThroughMost' || route.name === 'CollectMost' || route.name === 'UserSearch') {
        this.$store.dispatch('searchMsg', this.input)
        this.$router.go(0)
      } else {
        this.$store.dispatch('searchMsg', this.input)
        this.$router.push({
          name: 'SearchMenu'
        })
      }
    }
    // searchBlur () {
    //   this.suggestControl = !this.suggestControl
    // },
    // searchFocus () {
    //   this.suggestControl = !this.suggestControl
    // //   console.log(vc);
    // }
  }

}
</script>
<style lang="less" scoped>
#fontHeader{
    width: 100%;height: 60px;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
    position: fixed;top: 0;left: 0;
    z-index: 99;
    background: #fff;
    position:fixed;top: 0;left: 0;
    .fontHeader{
        width: 1000px;height: 100%;
        padding:15px 0;
        margin:0 auto;
        .logo{
            height:30px;width: auto;
            line-height:30px;
            overflow: hidden;
            img{
                height: 100%;
                width: 30px;
                height: 30px;
                margin-right: 10px;
            }
            .title{
              color:#FFB31A;
              margin: 0;
              padding: 0;
              float: right;
            }
        }
        .left{
            float: left;
        }
        .nav{
            margin-left: 20px;
            float: left;
            li{
                float: left;
                height:30px;line-height:30px;font-size:15px;padding:0 12px;
                letter-spacing: 1px;
                color:#000;
                &:hover{
                    color: #FFB31A;
                    cursor: pointer;
                }
            }
        }
        .act{
            font-weight:bold;
            color: #FFB31A !important;
            border-bottom: 2px solid #FFB31A;
        }
        .search{
            height: 30px;
            // display:inline-block;
            margin-left:15px;
            position:relative;
            float: left;
            input[type=text]{
                float:left;
                width: 182px;height: 30px;line-height: 16px;
                padding:  0 10px;
                border-top-left-radius:4px;border-bottom-left-radius:4px;
                background: #F7F7F7;
                color: #999;
                font-size: 12px;
            }
            button{
                float:left;
                width: 38px;height: 30px;
                border-top-right-radius:4px;border-bottom-right-radius:4px;
                cursor: pointer;
            }
            div{
                position: absolute;
                top: 30px;left:0;
                width: 100%;
                background-color: #fff;
                li{
                    height:30px;
                    font-size: 15px;
                    line-height: 30px;
                    text-align:left;
                    text-indent: 1em;
                    &:hover{
                        background-color: #EAEAEA;
                        cursor: pointer;
                    }
                    span:first-child{
                        color: #FFB31A;
                        color: #999;
                        font-size: 13px;
                    }
                    span:last-child{
                        text-indent:0.5em;
                        font-size: 13px;
                    }
                }
            }
        }
        .issue{
            float: left;margin-left: 15px;
            width: 60px;
            height:30px;line-height:30px;
            position: relative;
            border-radius:4px;
            font-size: 14px;
            text-align: center;
            background: #FFB31A;
            color: #fff;
            span{
                cursor: pointer;
            }
            &:hover{
                div{
                    display: block;
                }
            }
            div{
                display:none;
                position: absolute;
                left: -35px;top: 30px;
                padding-top: 15px;
                ul{
                    padding: 8px;
                    width: 130px;
                    background: #fff;
                    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
                    border-radius: 10px;
                    a{
                        display:block;
                        color: #000;
                        font-size: 14px;
                        &:hover{
                            cursor: pointer;
                            color: #FFB31A;
                        }
                    }
                }
            }
        }
        .myInfo{
            width: 30px; height:30px;
            border-radius: 15px;
            float: right;
            margin-right: 15px;
            position: relative;
            img{
                width: 100%;height: 100%;
                border-radius: 15px;
            }
            &:hover{
                div{
                    display: block;
                }
            }
            div{
                display:none;
                position: absolute;
                left: -50px;top: 30px;
                padding-top: 15px;
                ul{
                    padding: 8px;
                    width: 130px;
                    background: #fff;
                    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
                    border-radius: 10px;
                    a{
                        display:block;
                        color: #000;
                        height:35px;line-height: 35px;
                        text-align: center;
                        &:hover{
                            cursor: pointer;
                            color: #FFB31A;
                        }
                    }
                }
            }
        }
        .perInfo{
            float: right;
            margin-right: 15px;
            height: 30px;
            line-height: 30px;
            color: #000;
            a{
                color: #000;
                margin: 0 3px;
                &:hover{
                    color: #FFB31A;
                }
            }
        }
    }
}
</style>
